<template>
  <!--  已支付状态       -->
  <view
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
    class="all-container"
  >
    <swiper
      class="center-content"
      :duration="200"
      :vertical="false"
      @change="swiperChange"
    >
      <swiper-item
        class="swiper-item"
        v-for="(itemOut, indexOut) in contentList"
        :key="indexOut"
      >
        <view v-for="(itemOut2, indexOut2) in itemOut" :key="indexOut2">
          <text
            decode="true"
            class="payed-show-content"
            v-for="(item, index) in itemOut2"
            :key="index"
            >{{ item | filtertext }}</text
          >
        </view>
      </swiper-item>
    </swiper>

    <text class="payed-check-tip-box"> {{ currentIndexTip }} </text>

    <!--      底部提示区域  -->
    <view class="bottom-container">
      <span v-for="(item, index) in diagnoseDescArr"  :key="index">
           <span class="bottom-container-content" v-html="item"></span>
      </span>
      <!-- <span 
        class="bottom-container-content"
        v-for="(item, index) in diagnoseDescArr"
        :key="index"
        >/
      > -->
    </view>
    <image class="slide-up-img" @click="changePage" />
  </view>
</template>

<script>

import resumeUtils from "@/mixins/resumeUtils.js";
export default {
  
  mixins: [resumeUtils ],
  props: {
    pageIndex:{
      type:Number,
      default:0,
    },

    itemObj: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },

  data() {
    return {
      screenHeight: 0,
      screenWidth: 0,
      diagnoseDescArr: [], 
      contentList: [], 
      currentIndexTip: "左滑查看下一页",
    };
  },
  filters: {
    filtertext(val) {
      return val != null ? val : "";
    },
  },
  onReady() {
    let systemInfo = uni.getSystemInfoSync();
    this.screenHeight = systemInfo.windowHeight;
    this.screenWidth = systemInfo.windowWidth;
  },
  watch: {
    
    itemObj: {
      handler(val) {
        if (val.diagnoseDesc) {
          // 分割处理
          this.diagnoseDescArr = this.handleDiagnoseDescArr(val);
        }
         
        if (val.diagnoseContent) {
          this.contentList = this.parseDiagnosisResumeContent(val); 
        }

        if (this.contentList == null || this.contentList.length < 2) {
          this.currentIndexTip = " ";
        } else {
          this.currentIndexTip = "左滑查看下一页";
        }
      },

      deep: true, // 深度监听
      immediate: true, // 初始化的时候立刻执行一次
    },
  },

  methods: {
     
    changePage() { 
      this.$emit("setCurrentPage", this.pageIndex + 2);
    },

    swiperChange(event) {
      let currentIndex = event.detail.current;
      if (currentIndex == 0) {
        this.currentIndexTip = "左滑查看下一页";
      } else if (currentIndex == this.contentList.length - 1) {
        this.currentIndexTip = "右滑查看上一页";
      } else {
        this.currentIndexTip = currentIndex + 1 + "/" + this.contentList.length;
      }
    },
  },
};
</script>
 
<style  lang="scss" scoped>
.all-container {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url($img-base + "career/diagnosis/judge_result_item_bg_payed.png");

  display: flex;
  flex-direction: column;
  align-items: center;

  .center-content {
    width: 66%;
    height: 50%;
    position: fixed;
    top: 12%;
    .swiper-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: left;

      view {
        margin-bottom: 30rpx;
        .payed-show-content {
          color: white;
          font-size: 28rpx;
          white-space: normal;
          word-break: break-all;
          line-height: 48rpx;
        }
      }
    }
  }

  .payed-check-tip-box {
    width: 66%;
    height: auto; 
    position: fixed;
    top: 60%;
    color: white;
    font-size: 26rpx;
  }

  .bottom-container {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: left;
    position: fixed;
    bottom: 13%;
    left: 12%;
    right: 12%;

    .bottom-container-content {
      color: white;
      width: 100%;
      font-size: 28rpx;
      line-height: 60rpx;
    }
  }

  .slide-up-img {
    position: fixed;
    bottom: 5%;
    background-size: 100% 100%;
    background-image: url($img-base + "career/diagnosis/judge_result_item_down_arr.png");
    width: 50rpx;
    height: 50rpx;
  }
}

 
 
</style>